<template name="historial">
    <h2>Historial de viajes</h2>
    <form method="post" action="">
        <table style="width: 500px;">
            <tr>
                <th>Fecha salida desde (00:00:00 hs)</th>
                <td><input type="text" name="fecha_desde" id="fecha_desde" style="width: 100%;" value="{{fecha_desde}}" /></td>
            </tr>
            <tr>
                <th>Fecha salida hasta (23:59:59 hs)</th>
                <td><input type="text" name="fecha_hasta" id="fecha_hasta" style="width: 100%;" value="{{fecha_hasta}}" /></td>
            </tr>
        </table>
        <br/>
        <input type="submit" value="Buscar viajes" class="make_submit_button" />
    </form>
    <template name="viajes">
    <br/>
    <h2>Viajes desde {{fecha_desde_mostrar}} hasta {{fecha_hasta_mostrar}}</h2>
    {{pagination}}
    <table style="width: 100%">
        <tr>
            <th>ID</th>
            <th>Salida</th>
            <th>Llegada</th>
            <th>Conductor</th>
            <th>Veh&iacute;culo</th>
            <th>Grupo</th>
            <th>Retrasos</th>
            <th>Adelantos</th>
            <th>Desvios</th>
            <th></th>
        </tr>
        <template name="viaje">
        <tr>
            <td>{{idviaje}}</td>
            <td>{{salida_real}}</td>
            <td>{{llegada_real}}</td>
            <td>{{conductores.nombre}} {{conductores.apellido}}</td>
            <td>{{vehiculos.nombre}}</td>
            <td>{{grupos.nombre}}</td>
            <td>{{retrasos}}</td>
            <td>{{adelantos}}</td>
            <td>{{desvios}}</td>
            <td>
                <div class="ver" idElemento="{{idviaje}}">Ver</div>
            </td>
        </tr>
        </template>
    </table>
    {{pagination}}
    </template>
    <script type="text/javascript">
        $(function(){
            $('#fecha_desde').datepicker({
                changeMonth : true,
                changeYear  : true,
                beforeShow  : function()
                {
                    var auxDate = $('#fecha_hasta').val();
                    if (auxDate != '')
                    {
                        $(this).datepicker('option', 'maxDate', auxDate);
                    }
                }
            });
            $('#fecha_hasta').datepicker({
                changeMonth : true,
                changeYear  : true,
                beforeShow  : function()
                {
                    var auxDate = $('#fecha_desde').val();
                    if (auxDate != '')
                    {
                        var auxDateArr = auxDate.split('/');
                        $(this).datepicker('option', 'minDate', auxDate);
                    }
                }
            });
            $('.ver').button( { icons: {primary: "ui-icon-circlesmall-plus"} } ).bind('click', function() { document.location.href = '{{link_historial_viaje}}'+($(this).attr('idElemento')); } );
        });
    </script>
</template>